<template>
	<div class="home">
		<!-- 首页头部导航 -->
		<div class="navTop backgroundColor_ffffff">
			<home-head></home-head>
		</div>
		<!-- 子路由视图 -->
		<div class="homeContainer">
			<!-- 我是左侧菜单 -->
			<div class="slide-menu">
				<home-left-menu></home-left-menu>
			</div>
			<div class="container-view backgroundColor_ffffff">
				<router-view v-if="routerAlive"></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import homeHead from '@/components/home/homeHead.vue' // 首页头部导航
import homeLeftMenu from '@/components/home/homeLeftMenu.vue' // 首页头部导航
export default {
  components: {
    homeHead, // 首页头部导航
    homeLeftMenu// 我是左侧菜单
  },
  data () {
    return {
		routerAlive:true
    }
  },
  provide (){
  	return {
  		routerRefresh:this.routerRefresh
	}
  },
  mounted () {

  },
  methods: {
	  routerRefresh(){
	  	this.routerAlive=false;
	  	this.$nextTick(()=>{
	  		this.routerAlive=true;
		})
	  }
  }
}
</script>

<style scoped>

	.home {
		font-size: 18px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	/* 头部导航 */
	.navTop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 70px;
	}

	/* 主题内容 */
	.homeContainer {
		position: absolute;
		top: 70px;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
	}

	/* 主题内容-左侧菜单 */
	.slide-menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 80px;
		height: 100%;
		background: #f4f6f8;
	}

	/* 主题内容-右侧对应子路由内容 */
	.container-view {
		position: absolute;
		top: 0;
		left: 80px;
		right: 0;
		bottom: 0;
		padding: 40px 20px 40px 40px;
		overflow: auto;
	}
</style>
